<template>
    <base-view :model="queryParams" @submit="search">
        <template v-slot:params>
            <!-- 搜索区域 -->
            <a-col :span="8">
                <a-form-model-item label="费率代码">
                    <a-input v-model="queryParams.feeCd" placeholder="请输入费率代码(FEES+6位编号)" />
                </a-form-model-item>
            </a-col>
            <a-col :span="8">
                <a-form-model-item label="费率名称">
                    <a-input v-model="queryParams.feeName" placeholder="输入费率名称" />
                </a-form-model-item>
            </a-col>
            <a-col :span="8">
                <a-form-model-item label="费率描述">
                    <a-input v-model="queryParams.feeDesc" placeholder="输入费率描述" />
                </a-form-model-item>
            </a-col>
            <a-col :span="24">
                <a-form-model-item class="search">
                    <a-button type="primary" html-type="submit">搜索</a-button>
                    <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
                </a-form-model-item>
            </a-col>
        </template>
        <div class="btn-group">
            <a-button type="primary" @click="add">
                <a-icon type="plus" />
                <span>增加</span>
            </a-button>
        </div>
        <!-- 表格区域 -->
        <a-table ref="TableInfo" :columns="columns" :rowKey="
            (record, index) => {
                return index;
            }
        " @change="pageChange" @showSizeChange="pageChange" :dataSource="dataSource" :pagination="pagination"
            :loading="loading" :scroll="{ x: 900 }">
            <template slot="operation" slot-scope="text, record">
                <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" title="修改"
                    v-if="record.impStatus !== '02' && record.impStatus !== '03'"></a-icon>
                <a-icon type="delete" theme="twoTone" twoToneColor="#4a9ff5" @click="cancel(record)" title="注销"
                    v-if="record.impStatus !== '03'"></a-icon>
                <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情"></a-icon>
            </template>
        </a-table>

        <!-- 新增 -->
        <fee-add ref="feeAdd" @close="handleFeeAddClose" @success="handleFeeAddSuccess"
            :feeAddVisiable="feeAdd.visiable"></fee-add>
        <!-- 详情 -->
        <fee-info ref="feeInfo" @close="handleFeeInfoClose" :feeInfoVisiable="feeInfo.visiable"></fee-info>
        <!-- 修改 -->
        <fee-edit ref="feeEdit" @close="handleFeeEditClose" @success="handleFeeEditSuccess"
            :feeEditVisiable="feeEdit.visiable">
        </fee-edit>
        <!-- 注销 -->
        <fee-cancel ref="feeCancel" @close="handleFeeCancelClose" @success="handleFeeCancelSuccess"
            :feeCancelVisiable="feeCancel.visiable">
        </fee-cancel>

    </base-view>
</template>

<script>
import RangeDate from "../../../../../components/datetime/RangeDate";
import FeeAdd from "./FeeAdd";
import FeeEdit from "./FeeEdit";
import FeeCancel from "./FeeCancel";
import FeeInfo from "./FeeInfo";
import { mapState } from "vuex";

export default {
    name: "Fee",
    components: { FeeAdd, FeeEdit, FeeCancel, FeeInfo, RangeDate },
    data() {
        return {
            advanced: false,
            feeAdd: {
                visiable: false,
            },
            feeEdit: {
                visiable: false,
            },
            feeCancel: {
                visiable: false,
            },
            feeInfo: {
                visiable: false,
            },
            queryParams: {
                instId: "",
            },
            filteredInfo: null,
            sortedInfo: null,
            paginationInfo: null,
            dataSource: [],
            feeInfos: {},
            loading: false,
            pagination: {
                pageNum: 1,
                pageSize: 10,
                pageSizeOptions: ["10", "20", "30", "40", "100"],
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                showSizeChanger: true,
                showTotal: (total, range) =>
                    `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
            },
        };
    },
    computed: {
        ...mapState({
            currentUser: state => state.account.user
        }),
        columns() {
            let { sortedInfo, filteredInfo } = this;
            sortedInfo = sortedInfo || {};
            filteredInfo = filteredInfo || {};
            return [
                {
                    title: "法人行",
                    dataIndex: "instId",
                    sorter: true,
                    sortOrder:
                        sortedInfo.columnKey === "feeCode" && sortedInfo.order,
                    fixed: "left",
                    width: 120,
                },
                {
                    title: "费率代码(FEES+6位编号)",
                    dataIndex: "feeCd",
                    width: 170,
                },
                {
                    title: "费率名称",
                    dataIndex: "feeName",
                    width: 120,
                },
                {
                    title: "费率描述",
                    dataIndex: "feeDesc",
                    width: 150,
                },
                {
                    title: "审批状态",
                    dataIndex: "auditStatus",
                    width: 120,
                    customRender: (text, row, index) => {
                        switch (text) {
                            case "00":
                                return "待提交审批";
                            case "01":
                                return "新增-审批流程中";
                            case "02":
                                return "新增-审批通过";
                            case "03":
                                return "新增-审批拒绝";
                            case "41":
                                return "修改-审批流程中";
                            case "42":
                                return "修改-审批通过";
                            case "43":
                                return "修改-审批拒绝";

                            case "21":
                                return "停用-审批流程中";
                            case "22":
                                return "停用-审批通过";
                            case "23":
                                return "停用-审批拒绝";

                            case "31":
                                return "启用-审批流程中";
                            case "32":
                                return "启用-审批通过";
                            case "33":
                                return "启用-审批拒绝";

                            case "11":
                                return "注销-审批流程中";
                            case "12":
                                return "注销-审批通过";
                            case "13":
                                return "注销-审批拒绝";
                        }
                    },
                },
                {
                    title: "费率状态",
                    dataIndex: "impStatus",
                    width: 120,
                    customRender: (text, row, index) => {
                        switch (text) {
                            case "00":
                                return "非正式";
                            case "01":
                                return "正式";
                            case "02":
                                return " 停用";
                            case "03":
                                return "已注销";
                        }
                    }
                },
                {
                    title: "操作",
                    dataIndex: "operation",
                    fixed: "right",
                    width: 100,
                    scopedSlots: { customRender: "operation" },
                },
            ];
        },
    },
    methods: {
        toggleAdvanced() {
            this.advanced = !this.advanced;
            if (!this.advanced) {
                this.queryParams.createTimeFrom = "";
                this.queryParams.createTimeTo = "";
            }
        },
        add() {
            this.feeAdd.visiable = true;
            this.$refs.feeAdd.setFormValues(this.queryParams.instId);
        },
        handleFeeAddClose() {
            this.feeAdd.visiable = false;
        },
        handleFeeAddSuccess() {
            this.feeAdd.visiable = false;
            this.$message.success("新增成功");
            this.search();
        },
        async view(record) {
            this.feeInfo.visiable = true;
            await this.getFeeInfos("view", record.feeCd)
            this.$refs.feeInfo.setFormValues(record, this.feeInfos, "view");
        },
        async edit(record) {
            this.feeEdit.visiable = true;
            await this.getFeeInfos("edit", record.feeCd)
            this.$refs.feeEdit.setFormValues(record, this.feeInfos, "edit");
        },
        handleFeeEditClose() {
            this.feeEdit.visiable = false;
        },
        handleFeeEditSuccess() {
            this.feeEdit.visiable = false;
            this.$message.success("修改成功");
            this.search();
        },
        async cancel(record) {
            this.feeCancel.visiable = true;
            await this.getFeeInfos("edit", record.feeCd)
            this.$refs.feeCancel.setFormValues(record, this.feeInfos, "cancel");
        },
        handleFeeCancelClose() {
            this.feeCancel.visiable = false;
        },
        handleFeeCancelSuccess() {
            this.feeCancel.visiable = false;
            this.$message.success("注销成功");
            this.search();
        },
        handleFeeInfoClose() {
            this.feeInfo.visiable = false;
        },
        handleChange() {
        },
        async submit() {
            this.modalVisible = false;
            this.pagination.pageNum = this.pagination.defaultCurrent;
            this.pagination.pageSize = this.pagination.defaultPageSize;
            await this.search();
        },

        async reset() {
            // this.queryParams = {instId:this.queryParams.instId}
            this.queryParams = {}
            this.pagination.pageNum = this.pagination.defaultCurrent;
            this.pagination.pageSize = this.pagination.defaultPageSize;
            this.dataSource = [];
            if (!this.currentUser.admin) {
                this.queryParams.instId = this.currentUser.instId;
                await this.search();
            }
        },
        async search(e) {
            try {
                const res = await this.$get("/admin/fee/feeInfo/list", {
                    ...this.queryParams,
                    pageNum: this.pagination.pageNum,
                    pageSize: this.pagination.pageSize,
                });
                this.dataSource = res.data.rows;
                this.$set(this.pagination, "total", +res.data.total);
            } catch (e) {
                console.error(e);
            }
        },
        pageChange(e) {
            this.pagination.pageNum = e.current;
            this.pagination.pageSize = e.pageSize;
            this.search();
        },
        async getFeeInfos(optFlag, feeCd) {
            try {
                const res = await this.$get("/admin/fee/feeInfo/edit", {
                    optFlag: optFlag,
                    feeCd: feeCd,
                    instId: this.queryParams.instId,
                });
                if (res.status === 200) {
                    this.feeInfos = res.data.feeinfos;
                }
            } catch (e) {
                console.error(e);
            }
        }
    },
    mounted() {
        // debugger
        console.log("fee");
        console.log(this.currentUser);
        console.log(this.queryParams);
        // this.queryParams.instId = this.currentUser.instId;
    }
};
</script>
<style lang="less" scoped>
@import "../../../../../../static/less/Common";
</style>
